<template>
  <div>
    <nav-bar title="工种出勤统计"></nav-bar>
    <div class="WorkTypeAttendance center maxinBox">
      <van-row class="tableTitle">
        <van-col :span="8">工种</van-col>
        <van-col :span="8">出勤人数</van-col>
        <van-col :span="8">日期</van-col>
      </van-row>
      <van-row class="tableContent backgroundfff" v-for="(item, index) in dataList" :key="index">
        <van-col :span="8">{{item.categoryName}}</van-col>
        <van-col :span="8">{{item.count}}</van-col>
        <van-col :span="8" v-if="item.workDate">{{item.workDate | formatDate('YYYY-MM-DD')}}</van-col>
        <van-col :span="8" v-else>--</van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
  import moment from 'moment'
  import attendanceAPI from '../../../../api/workAPI/attendanceAPI.js'
  export default {
    data() {
      return {
        dataList: []
      }
    },
    methods: {
      getAttendanceList() {
        let projectId = localStorage.getItem('projectId')
        let date = moment(new Date()).format('YYYY-MM-DD')
        attendanceAPI.getAttendanceListByWorkType(projectId, date).then(res => {
          this.dataList = res
        })
      }
    },
    mounted() {
      this.getAttendanceList()
    }
  }
</script>

<style scoped lang="scss">
  .WorkTypeAttendance{
    font-size: 0.875rem;
    .tableContent:nth-child(2n){
      padding: 0.625rem 0.9375rem;
      color: #666;
    }
    .tableContent:nth-child(2n + 1){
      padding: 0.625rem 0.9375rem;
      color: #666;
      background-color: #F6FAFF;
    }
    .tableTitle{
      padding: 0.625rem 0.9375rem;
      background-color: #F6F6F6;
      height: 1.25rem;
      color: #999;
    }
  }
</style>
